<template>
    <div class="home-container">
      <!-- 轮播图 -->
      <div class="carousel">
        <img
          v-if="currentIndex === 0"
          src="../assets/heart.png"
          alt="心脏健康轮播"
          class="carousel-img"
        />
        <img
          v-else
          src="../assets/activity.png"
          alt="今日运动轮播"
          class="carousel-img"
        />
      </div>
      <!-- 顶部横幅 -->
      <div class="banner">
        <img src="../assets/weight.png" alt="今日运动" class="banner-img" />
        <div class="banner-text">
          <h2>最重要的一天<br>就是今天</h2>
          <p>全新"今日"首页，方便查看每日关心数据，快捷使用常用功能。</p>
        </div>
      </div>
      <!-- 健康服务卡片区 -->
      <div class="card-grid">
        <div class="card">
          <img src="../assets/xinzang.png" alt="心脏健康" />
          <div>
            <h3>心脏健康</h3>
            <p>心率监测 心电图解读</p>
          </div>
        </div>
        <div class="card">
          <img src="../assets/tizhong.png" alt="体重管理" />
          <div>
            <h3>体重管理</h3>
            <p>体成分测量 饮食管理</p>
          </div>
        </div>
        <div class="card">
          <img src="../assets/sleep.png" alt="睡眠" />
          <div>
            <h3>睡眠</h3>
            <p>舒眠减压 监测睡眠</p>
          </div>
        </div>
        <div class="card">
          <img src="../assets/qingxu.jpg" alt="情绪" />
          <div>
            <h3>情绪管理</h3>
            <p>情绪监测 情绪调节</p>
          </div>
        </div>
        <div class="card">
          <img src="../assets/sanyecao.jpg" alt="健康三叶草" />
          <div>
            <h3>创建健康目标</h3>
            <p>制定健康目标 提升生活质量</p>
          </div>
        </div>
        <div class="card">
          <img src="../assets/yundong.jpg" alt="运动" />
          <div>
            <h3>运动</h3>
            <p>制定运动计划 保持健康</p>
          </div>
        </div>
        <!-- 其他卡片同理 -->
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  
  const currentIndex = ref(0);
  let timer: number | undefined;
  
  onMounted(() => {
    timer = window.setInterval(() => {
      currentIndex.value = (currentIndex.value + 1) % 2;
    }, 3000); // 每3秒切换
  });
  
  onUnmounted(() => {
    if (timer) clearInterval(timer);
  });
  </script>
  
  <style scoped>
  .home-container {
    padding: 24px;
  }
  .carousel {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 16px;
    background: #f7f7f7;
  }
  .carousel-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
  }
  .banner {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
  }
  .banner-img {
    width: 200px;
    margin-right: 32px;
  }
  .banner-text h2 {
    font-size: 2rem;
    font-weight: bold;
  }
  .card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px #eee;
    padding: 16px;
    display: flex;
    align-items: center;
  }
  .card img {
    width: 56px;
    margin-right: 16px;
  }
  </style>